<template>
	<view class="">
		<u-navbar title="监控设备" bgColor="transparent" :autoBack="false" leftIcon=" " :fixed="false"></u-navbar>
		<view class="p-30">
			<view class="aaaa flex-row">
				<u-avatar v-if="isLogin" :src="$shopInfo.image" size="60"></u-avatar>
				<view class="ml-30">
					<template v-if="isTeacher == 1">
						<view class="color fw-700 big-size">
							{{$teacherInfo.name}}
						</view>
						<view class="flex-row mt-30">
							<u-icon name="bookmark-fill" color="#6CB500"></u-icon>
							<view class="small-size">
								所在班级:{{$banjiInfo && $banjiInfo.name}}
							</view>
						</view>
						<view class="flex-row mt-30">
							<u-icon name="calendar-fill" color="#6CB500"></u-icon>
							<view class="small-size">
								开放时间:全天
							</view>
						</view>
					</template>
					<template v-else>
						<template v-if="isLogin">
							<view class="color fw-700 big-size">
								{{$shopInfo.name}}
							</view>

							<view class="flex-row mt-30">
								<u-icon name="bookmark-fill" color="#6CB500"></u-icon>
								<view class="small-size">
									所在班级:{{$banjiInfo.name}}
								</view>
							</view>
							<view class="flex-row mt-30">
								<u-icon name="calendar-fill" color="#6CB500"></u-icon>
								<view class="small-size">
									到期时间:{{$u.timeFormat($studentInfo.endtime, 'yyyy年mm月dd日')}}
								</view>
							</view>
						</template>
						<template v-else>
							<navigator class="gray-color" url="/pages/common/login">登录</navigator>
						</template>
					</template>
				</view>
			</view>
			<template v-if="!noData">
				<view class="flex-row flex-wrap justify-between">
					<navigator :url="`/pages/monitor/detail?id=${item.id}`" class="mt-30 item" style="width: 48%;"
						v-for="(item,index) in list">
						<image src="/static/images/monitor-bg.png" style="height: 100rpx;width: 100%;" mode="widthFix">
						</image>
						<view class="item-content">
							<view class="size fw-700" style="padding: 10rpx 0;">
								{{item.name}}
							</view>
							<view class="">
								<view class="flex-row align-center small-size">
									<u-icon name="map-fill" color="#6CB500"></u-icon>
									<view class="ml-10">
										{{item.type_text ? item.type_text : '教室'}}
									</view>
								</view>
								<view class="flex-row align-center small-size mt-10">
									<u-icon name="clock-fill" color="#6CB500"></u-icon>
									<view class="ml-10">

										开放时间 {{$banjiInfo.starttimes}} -{{$banjiInfo.endtimes}}
									</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</template>
			<template v-else>
				<u-empty marginTop="60" mode="data">
				</u-empty>
			</template>
		</view>

		<u-toast ref="uToast"></u-toast>
		<u-modal :show="modalshow" :title="modaltitle" :content='modalcontent' @confirm="modalshow = false"></u-modal>
		<page-tabbar :value="2" />
	</view>
</template>

<script>
	import {
		monitorList
	} from '@/common/api.js'
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				modalshow: false,
				modaltitle: '温馨提示',
				modalcontent: "",
				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0
			}
		},
		onLoad() {
			if (this.isLogin) {
				let week = this.$banjiInfo.week.split(',')
				let today = new Date();
				let weekday = today.getDay();
				let year = today.getFullYear();
				let month = today.getMonth() + 1;
				let day = today.getDate();
				let hour = today.getHours();
				let minute = today.getMinutes();
				let second = today.getSeconds();
				//开放时间

				let start = new Date(`${year}-${month}-${day} ${this.$banjiInfo.starttimes}`).getTime();
				let end = new Date(`${year}-${month}-${day} ${this.$banjiInfo.endtimes}`).getTime();
		
			
				if (!week.includes(weekday.toString()) || (new Date().getTime() < start || new Date().getTime() > end)) {

					this.modalcontent = `当前时间段未开放`;
					this.modalshow = true;
				} else {
					this.init()
				}
			}
		},
		methods: {
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit
				};
				monitorList({
					params
				}).then(res => {
					console.log(res.rows.length);
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}
				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>


<style>
	.aaaa {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: url('') no-repeat;
		background-size: 100% 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.item {
		background-color: #fff;
	}

	.item-content {
		padding: 10rpx;
	}
</style>